<!--
*@Author: zt
*@Description: 会议室选择
*@Date 2024-07-15 09:58
-->
<template>
  <u-dialog
    v-bind="$attrs"
    @submit="submit()">
    <a-layout class="f-h-100 s-bg-white">
      <u-search-header style="padding-left: 0; padding-right: 0">
        <u-form
          :model="searchF.model"
          :gutter="16"
          :elements="searchEl"
          class="f-w-auto">
          <a-col>
            <u-icon-button @click="getSearch(1)">查询</u-icon-button>
          </a-col>
        </u-form>
      </u-search-header>
      <a-layout-content>
        <u-table
          :columns="columns"
          :data="tabData"
          v-model:pagination="pagenation"
          :row-selection="{
            hideSelectAll: true,
            selectedRowKeys: state.selectedRowKeys,
            onChange: onSelectChange,
          }"></u-table>
      </a-layout-content>
    </a-layout>
  </u-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, h, watch, useAttrs } from "vue";
import { _IFormEl } from "@/components/common/form/interface";
import { FormItemProps, Image, TableColumnProps } from "ant-design-vue";
import * as meetRoomApi from "@/service/administration/meet/room/index";
import { alertC } from "@/util/common";
import { formatImgUrl } from "@/util/format";
import { statusColors } from '@/views/oa/administration/meet/room/data.ts'

const props = defineProps<{
  selectedRowKeys?: any[];
}>();

const attrs = useAttrs();
const emits = defineEmits(["submit"]);

type Key = string | number;
const state = reactive<{
  selectedRowKeys: Key[];
  selectedRows: any[];
}>({
  selectedRowKeys: [],
  selectedRows: [],
});

const onSelectChange = (selectedRowKeys: Key[], selectedRows) => {
  state.selectedRowKeys = selectedRowKeys.splice(-1, 1);
  state.selectedRows = selectedRows.splice(-1, 1);
};

let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: (total) => `共 ${total} 条`,
});
const startTime = ref();
const endTime = ref();
const searchF = ref({
  model: {
    fwzh: "",
    fwzh1: "",
  },
});
const formItemProps: FormItemProps = {};
const searchEl: Array<_IFormEl> = [
  {
    label: "名称",
    key: "keywords",
    element: "input",
    col: { span: 4 },
    formItemProps: formItemProps,
    componentProps: { placeholder: "请输入会议名称" },
  },
];

// 列表
let tabData = ref([]);
let columns: Array<TableColumnProps> = reactive([
  {
    dataIndex: "filepath",
    title: "会议室图片",
    width: 100,
    align: "center",
    customRender: ({ text }) => {
      return h(Image, { src: formatImgUrl(text), style: { width: "40px", height: "40px" } });
    },
  },
  { dataIndex: "name", title: "会议室名称", width: 150 },
  { dataIndex: "address", title: "会议室地点", width: 100 },
  { dataIndex: "capacity", title: "容纳人数", width: 150 },
  {
    dataIndex: "conferenceStatus",
    title: "会议室状态",
    width: 150,
    align: "center",
    customRender: ({ text }) => {
      return h("span", { style: { color: statusColors[text] } }, text);
    },
  },
]);

// 列表查询
const getSearch = async (current: any) => {
  if (current == 1) {
    pagenation.current = current;
  }
  searchF.value.current = pagenation.current;
  searchF.value.size = pagenation.pageSize;
  searchF.value.model.startTime = startTime.value;
  searchF.value.model.endTime = endTime.value;
  const res = await meetRoomApi.page(searchF.value);
  if (res.code == 0) {
    tabData.value = res.data.records;
    pagenation.total = res.data.total;
  }
};

const submit = () => {
  let resultRow = state.selectedRows.every((i) => i.conferenceStatus != "空闲中");
  if (resultRow) {
    return alertC("请选择状态为【空闲中】的会议室", "warning");
  } else {
    emits("submit", { rows: state.selectedRows, keys: state.selectedRowKeys });
  }
};

watch(
  () => attrs.open,
  async (val, nav) => {
    if (val) {
      startTime.value = attrs.startTime;
      endTime.value = attrs.endTime;

      state.selectedRowKeys = props.selectedRowKeys || [];

      await getSearch(1);
    } else {
      state.selectedRowKeys = [];
    }
  }
);
</script>

<style lang="scss" scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}
</style>
